<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>生命周期</title>
</head>
<body>
  <div id='app'>
    {{ count }}
    <button @click="add1">加1</button>
  </div>
</body>
<script src='../lib/vue.global.js'></script>
<script>
    const { 
      createApp, 
      ref,
      onBeforeMount,
      onMounted,
      onBeforeUpdate,
      onUpdated,
      onBeforeUnmount,
      onUnmounted,
      onErrorCaptured
    } = Vue
    const app = createApp({
      setup () {

        const count = ref(0)

        const add = () => {
          count.value++
          if (count.value === 5) {
            app.unmount()
          }
        }
        onErrorCaptured(() => {
          console.log('出错了')
        })
       
        onBeforeMount(() => {
          console.log('onBeforeMount')
        })
        onMounted(() => {
          console.log('onMounted')
        })
        onBeforeUpdate(() => {
          console.log('onBeforeUpdate')
        })
        onUpdated(() => {
          console.log('onUpdated')
        })
        onBeforeUnmount(() => {
          console.log('onBeforeUnmount')
        })
        onUnmounted(() => {
          console.log('onUnmounted')
        })

        return {
          count,
          add
        }
      }
    })

    app.mount('#app')
</script>
</html>